<template>
    <!-- 博主信息 -->
    <div class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
        <div class="flex flex-col items-center">
            <!-- 博主头像 -->
            <div class="relative mb-4">
                <img class="w-20 h-20 rounded-full shadow"
                :src="blogSettingsStore.blogSettings.avatar"/>    
                <span
                    class="bottom-3 left-16 absolute w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
            </div>
            <!-- 博主昵称 -->
            <h5 class="mb-2 text-xl font-medium text-gray-900 dark:text-white">{{ blogSettingsStore.blogSettings.author
                }}</h5>
            <!-- 介绍语 -->
             <!-- 介绍语 -->
            <span class="mb-2 text-sm text-gray-500 dark:text-gray-400" data-tooltip-target="introduction-tooltip-bottom"
                data-tooltip-placement="bottom">{{ blogSettingsStore.blogSettings.introduction }}</span>
                
            <div id="introduction-tooltip-bottom" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                个人简介
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>
        </div>

        <!-- 文章数量、分类数量、标签数量、总访问量 -->
        <!-- flex 布局，justify-center 水平居中，gap-5 设置 flex 内子元素的间距 -->
        <div class="flex justify-center gap-5 mb-2 mt-2 dark:text-gray-400">
            <!-- flex 布局，items-center 垂直居中，flex-col 设置子元素上下排列，hover: 用于设置鼠标移动到上面的样式，字体颜色、scale-110 放大效果，cursor-pointer 指定鼠标移动到上面为小手指样式 -->
            <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer">
                <!-- 字体大小为 text-lg , font-bold 字体加粗 -->
                <CountTo :value="statisticsInfo.articleTotalCount" customClass="font-bold text-lg"></CountTo>
                <!-- 字体大小为 text-sm -->
                <div class="text-sm">文章</div>
            </div>
            <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer">
                <CountTo :value="statisticsInfo.categoryTotalCount" customClass="font-bold text-lg"></CountTo>
                <div class="text-sm">分类</div>
            </div>
            <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer">
                <CountTo :value="statisticsInfo.tagTotalCount" customClass="font-bold text-lg"></CountTo>
                <div class="text-sm">标签</div>
            </div>
            <div class="flex items-center flex-col gap-1">
                <CountTo :value="statisticsInfo.pvTotalCount" customClass="font-bold text-lg"></CountTo>
                <div class="text-sm">总访问量</div>
            </div>
        </div>

        <!-- 第三方平台主页跳转（如 GitHub 等） -->
        <div class="flex justify-center gap-2">
            <!-- GitHub -->
            <svg t="1698029949662" class="icon w-7 h-7 mt-5 hover:scale-110" viewBox="0 0 1024 1024" version="1.1"
                @click="jump(blogSettingsStore.blogSettings.githubHome)" data-tooltip-target="tooltip-github"
                data-tooltip-placement="bottom" xmlns="http://www.w3.org/2000/svg" p-id="1447" width="200" height="200">
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#4186F5" p-id="1448">
                </path>
                <path
                    d="M611.944 302.056c0-15.701 2.75-30.802 7.816-44.917a384.238 384.238 0 0 0-186.11 2.956c-74.501-50.063-93.407-71.902-107.975-39.618a136.243 136.243 0 0 0-3.961 102.287 149.515 149.515 0 0 0-39.949 104.806c0 148.743 92.139 181.875 179.961 191.61a83.898 83.898 0 0 0-25.192 51.863c-40.708 22.518-91.94 8.261-115.181-32.058a83.117 83.117 0 0 0-60.466-39.98s-38.871-0.361-2.879 23.408a102.97 102.97 0 0 1 43.912 56.906s23.398 75.279 133.531 51.863v65.913c0 10.443 13.548 42.63 102.328 42.63 71.275 0 94.913-30.385 94.913-42.987V690.485a90.052 90.052 0 0 0-26.996-72.03c83.996-9.381 173.328-40.204 179.6-176.098a164.706 164.706 0 0 1-21.129 1.365c-84.07 0-152.223-63.426-152.223-141.666z"
                    fill="#FFFFFF" p-id="1449"></path>
                <path
                    d="M743.554 322.765a136.267 136.267 0 0 0-3.961-102.289s-32.396-10.445-107.979 39.618a385.536 385.536 0 0 0-11.853-2.956 132.623 132.623 0 0 0-7.816 44.917c0 78.24 68.152 141.667 152.222 141.667 7.171 0 14.222-0.472 21.129-1.365 0.231-5.03 0.363-10.187 0.363-15.509a149.534 149.534 0 0 0-42.105-104.083z"
                    fill="#FFFFFF" opacity=".4" p-id="1450"></path>
            </svg>

            <div id="tooltip-github" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                我的GitHub
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>

            <!-- Gitee -->
            <svg t="1730187950617" class="icon w-7 h-7 mt-5 hover:scale-110" viewBox="0 0 1024 1024" version="1.1"
                @click="jump(blogSettingsStore.blogSettings.giteeHome)" data-tooltip-target="tooltip-gitee"
                data-tooltip-placement="bottom" xmlns="http://www.w3.org/2000/svg" p-id="11747" width="200"
                height="200">
                <path
                    d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                    fill="#5fa2f1" p-id="11748"></path>
            </svg>
            <div id="tooltip-gitee" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                我的Gitee
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>
            <!-- 知乎 -->
            <svg t="1698031258903" class="icon w-7 h-7 mt-5 hover:scale-110" viewBox="0 0 1024 1024" version="1.1"
                @click="jump(blogSettingsStore.blogSettings.zhihuHome)" data-tooltip-target="tooltip-zhihu"
                data-tooltip-placement="bottom" xmlns="http://www.w3.org/2000/svg" p-id="3419" width="200" height="200">
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFFFFF" p-id="3420"></path>
                <path
                    d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM382.08 267.52s-36.16 2.112-48.96 24.512c-12.8 22.336-54.272 137.344-54.272 137.344s13.824 6.4 37.248-10.624c23.424-17.088 30.912-46.848 30.912-46.848l42.56-2.176 1.088 121.408s-73.472-1.088-88.384 0c-14.912 1.088-23.424 40.448-23.424 40.448h111.808s-9.6 67.136-38.4 116.096c-28.672 49.024-83.008 87.296-83.008 87.296s39.424 16 77.696-6.4c38.4-22.336 66.688-120.64 66.688-120.64l89.92 110.08s8.192-52.48-1.472-67.2c-9.664-14.848-62.208-74.304-62.208-74.304l-22.976 20.224 16.32-65.088H531.2s0-38.4-19.2-40.512c-19.136-2.112-78.72 0-78.72 0V371.84h88.32s-1.024-39.424-18.048-39.424H359.68l22.4-64.96z m170.048 61.184v358.592h35.968l13.12 44.992 63.36-45.056h89.088V328.704h-201.6z"
                    fill="#0F84FD" p-id="3421"></path>
                <path d="M594.752 368.64h117.952v277.888h-41.92l-53.376 40.256-11.648-40.32h-11.008V368.64z"
                    fill="#0F84FD" p-id="3422"></path>
            </svg>
            <div id="tooltip-zhihu" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                我的知乎
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>
            <!-- CSDN -->
            <svg t="1730188137738" class="icon w-7 h-7 mt-5 hover:scale-110" viewBox="0 0 1024 1024" version="1.1"
                @click="jump(blogSettingsStore.blogSettings.csdnHome)" data-tooltip-target="tooltip-csdn"
                data-tooltip-placement="bottom" xmlns="http://www.w3.org/2000/svg" p-id="16345" width="200"
                height="200">
                <path
                    d="M824.64 720.192a42.88 42.88 0 0 0-29.952-11.776 37.696 37.696 0 0 0-28.16 12.864c-63.488 72.768-174.272 80.64-218.88 80.64-82.944 0-146.368-21.056-188.544-62.464-40.064-39.296-61.12-97.28-62.464-172.16-3.2-173.632 95.104-353.28 265.216-353.28 81.28 0 144.384 57.664 167.68 82.432a42.88 42.88 0 0 0 30.848 13.632 37.312 37.312 0 0 0 29.44-13.44l6.656-7.808a75.52 75.52 0 0 0 17.28-58.176 85.12 85.12 0 0 0-30.72-55.808A329.856 329.856 0 0 0 569.792 99.2c-104.704 0-208.128 48.128-283.712 132.16-79.488 88.32-121.92 208.448-119.488 338.368 1.92 104.256 36.096 191.872 98.88 253.44 67.52 66.24 166.336 101.184 285.888 101.184 140.288 0 227.2-41.536 275.52-76.352 18.688-13.44 29.824-34.752 30.72-58.24a83.904 83.904 0 0 0-26.624-63.68l-6.272-5.888z"
                    fill="#FC5531" p-id="16346"></path>
            </svg>
            <div id="tooltip-csdn" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                我的CSDN
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>
            <!-- 稀土掘金 -->
            <svg t="1730188206796" class="icon w-7 h-7 mt-5 hover:scale-110" viewBox="0 0 1316 1024" version="1.1"
                @click="jump(blogSettingsStore.blogSettings.juejinHome)" data-tooltip-target="tooltip-juejin"
                data-tooltip-placement="bottom" xmlns="http://www.w3.org/2000/svg" p-id="17471" width="200"
                height="200">
                <path
                    d="M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z"
                    fill="#1E80FF" p-id="17472"></path>
            </svg>
            <div id="tooltip-juejin" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                我的稀土掘金
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>
            <!-- 华为云 -->
            <svg t="1730188349445" class="icon w-7 h-7 mt-5 hover:scale-110" viewBox="0 0 1382 1024" version="1.1"
                @click="jump(blogSettingsStore.blogSettings.huaweiHome)" data-tooltip-target="tooltip-huawei"
                data-tooltip-placement="bottom" xmlns="http://www.w3.org/2000/svg" p-id="22716" width="200"
                height="200">
                <path
                    d="M587.001106 0.138043a236.743057 236.743057 0 0 0-179.455379 83.9299c-70.263683 96.629819-19.187921 232.739822 19.187921 310.319763s210.791049 355.32165 217.141009 361.671609 12.837962 6.488002 12.837961 0 19.049879-413.437584 6.34996-510.757616A1387.742249 1387.742249 0 0 0 587.001106 0.138043z m-376.856296 187.185764c-12.837962 0-102.289566 96.629819-115.127527 180.973847s31.88784 148.671879 134.177406 219.625775C337.834215 665.365328 587.001106 800.785117 593.627151 794.849286c6.211917-12.976004-95.801564-193.259639-185.391211-329.645727S222.84473 187.323807 210.14481 187.323807z m31.887841 827.151254c76.613642 32.301968 197.953087-45.277972 229.840927-64.603937l89.589647-64.603936-434.558102 12.837962a331.992451 331.992451 0 0 0 115.127528 116.369911z m12.699919-355.32165C178.118927 620.225398 18.541683 529.807495 12.053681 529.807495s-31.88784 116.369911 19.187921 200.437854 147.015368 110.434079 191.603128 116.369911c51.213804 6.34996 345.106498 6.34996 345.106497 0-6.488002-6.626045-236.605015-148.809922-313.218657-187.461849zM970.345404 83.9299A237.295228 237.295228 0 0 0 791.580238 0.138043a1026.622809 1026.622809 0 0 0-70.263683 239.089781c-12.837962 96.629819 6.34996 510.757617 6.349959 510.757617 0 6.34996 6.211917 6.34996 12.699919 0s185.253168-291.269884 217.141009-362.22378 82.825559-207.063899 12.837962-303.693718z m402.532218 445.877595c-6.34996 0-165.651119 90.417902-242.816931 129.345916S823.468078 840.127258 817.118119 846.61526c0 6.34996 293.892693 6.34996 345.106497 0 44.725802-6.488002 140.527366-32.440011 191.603128-116.369911 44.725802-84.067943 19.187921-200.437854 19.187921-200.437854zM906.43168 949.871124c31.88784 19.464006 153.365328 96.629819 229.97897 64.603937a266.008088 266.008088 0 0 0 114.851443-122.857914l-434.42006-12.837961zM1283.840146 368.297654c-6.211917-84.067943-102.289566-180.973847-114.989485-180.973847s-121.339445 142.183877-204.441089 277.879752S778.604233 781.873281 785.092236 794.849286s255.516851-129.345915 364.018333-207.063899c102.289566-70.953896 140.665408-129.207873 134.177407-219.625775z"
                    fill="#EA020A" p-id="22717"></path>
            </svg>
            <div id="tooltip-huawei" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                我的华为云博客
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>
            <!-- 腾讯云 -->
            <svg t="1730188508232" class="icon w-7 h-7 mt-5 hover:scale-110" viewBox="0 0 1024 1024" version="1.1"
                @click="jump(blogSettingsStore.blogSettings.tencentHome)" data-tooltip-target="tooltip-tencent"
                data-tooltip-placement="bottom" xmlns="http://www.w3.org/2000/svg" p-id="24664" width="200"
                height="200">
                <path
                    d="M512 170.666667c130.474667 0 240.938667 83.797333 277.930667 199.296a198.826667 198.826667 0 0 0-41.557334-0.597334 222.293333 222.293333 0 0 0-49.706666 10.624C668.202667 309.333333 596.096 259.754667 512 259.754667c-100.266667 0-183.466667 70.528-199.381333 163.029333a279.04 279.04 0 0 0-89.429334-3.84C241.28 278.954667 363.690667 170.666667 512 170.666667z"
                    fill="#006DFE" p-id="24665"></path>
                <path
                    d="M258.474667 417.322667c54.442667 0 104.192 20.181333 142.165333 53.418666 16.085333 14.08 45.226667 39.68 87.381333 76.8l-7.381333-6.528-61.568 60.885334-54.4-54.4c-34.218667-34.261333-66.090667-47.957333-106.197333-47.957334a133.589333 133.589333 0 0 0 0 267.221334c10.666667 0 29.312 0.768 56.064 2.346666l-90.453334 77.141334A215.893333 215.893333 0 0 1 258.432 417.28z"
                    fill="#00CDD8" p-id="24666"></path>
                <path
                    d="M674.346667 434.474667a215.808 215.808 0 0 1 168.618666 397.354666c-15.36 6.485333-38.186667 15.957333-63.146666 16.213334-72.106667 0.597333-244.181333 0.896-516.352 0.938666h-42.666667a206248.106667 206248.106667 0 0 0 397.013333-380.714666c18.261333-17.578667 41.130667-27.264 56.533334-33.792z m41.856 80.554666c-9.258667 3.925333-23.04 9.770667-34.048 20.352-30.165333 29.098667-109.952 105.642667-239.445334 229.632h53.418667c148.181333 0 242.773333-0.213333 283.733333-0.554666 15.061333-0.128 28.842667-5.845333 38.101334-9.813334a130.133333 130.133333 0 0 0-101.76-239.616z"
                    fill="#00A2FF" p-id="24667"></path>
            </svg>
            <div id="tooltip-tencent" role="tooltip"
                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                我的腾讯云博客
                <div class="tooltip-arrow" data-popper-arrow></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getStatisticsInfo } from '@/api/frontend/statistics';
import CountTo from '@/components/CountTo.vue';
import { showMessage } from '@/composables/utils';
import { useBlogSettingsStore } from '@/stores/blogsettings'
import { initTooltips } from 'flowbite'
import { onMounted, ref } from 'vue'

// 初始化 Flowbit 组件
onMounted(() => {
    initTooltips();
})

// 引入博客设置信息 store
const blogSettingsStore = useBlogSettingsStore()
// 跳转页面
const jump = (url) => {
    // 在新窗口访问新的链接地址
    window.open(url, '_blank');
} 
const statisticsInfo = ref({})
// 获取基本统计数据信息
const getBaseStatisticsInfo = () => {
    getStatisticsInfo().then((res) => {
        if (res.success == true) {
            statisticsInfo.value = res.data
        } else {
            showMessage(res.message, 'error')
        }
    })
}

getBaseStatisticsInfo()
</script>